<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>主界面</title>
	<link href="/js/jquery-ui-1.13.2/jquery-ui.min.css" rel="stylesheet">
	<script src='/js/jquery-3.6.4.min.js'></script>
	<script src='/js/jquery-ui-1.13.2/jquery-ui.min.js'></script>
	<style>
		body {
			font-family: Arial, Helvetica, sans-serif;
			margin: 0;
			padding: 0;
		}
		
		header {
			color: #fff;
			padding: 20px;
		}
		
		nav ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		
		nav li {
			display: inline-block;
			margin-right: 10px;
			width:100px;
		}

		main {
			margin: 20px;
		}
	</style>
</head>
<body>
	<header>
		<nav>
			<ul>
				<li><a href="/read">阅读</a></li>
				<li><a href="/search">查询</a></li>
				<li><a href="/upload">上传书籍</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<!-- 这里添加主体内容 -->
		<h1>欢迎来到书籍管理系统</h1>
		<p>在这里，您可以方便地阅读、查询和上传各种书籍。</p>
	</main>
	<footer>
		<!-- 这里添加页脚信息 -->
	</footer>

	<script>
		// 使用 jQuery UI 美化菜单样式
		$(function() {
			$("nav ul").menu();
		});
	</script>
</body>
</html>
